<template>
  <el-tree :data="menus" :props="defaultProps"
           node-key="catId"
           ref="menutree" @node-click="nodeClike">
  </el-tree>
</template>

<script setup>

export default {
  data() {
    return {
      menus: [],
      expandedKey: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  methods: {
    //查询所有分类
    getMenus() {
      this.$http({
        url: this.$http.adornUrl('/product/pmsCategory/list/tree'),
        method: 'get'
      }).then(({data}) => {
        if (data && data.code === 0) {
          console.log('成功获取菜单数据...', data.data)
          this.menus = data.data;
        } else {
          this.$message.error(data.msg);
        }
      })
    },

    //点击某个节点触发回调
    nodeClike(data, node, component) {
      console.log("子节点回调:", data, node, component);

      //向父组件发送事件
      this.$emit("tree-node-clike", data, node, component);
    }
  },
  created() {
    this.getMenus()
  }
}

</script>

<style scoped>

</style>
